<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
    import Header from "./components/Layout/Header";

    export default {
        name: 'app',
        components: {Header},
        methods: {
            handleLangCommand (command) {
                this.$router.replace({name: this.$route.name, params: {lang: command}})
            }
        }
    }
</script>

<style lang="scss">
    $head-height : 50px;

    .fm-container{
        height: calc( 100vh - #{$head-height});
        display: flex;
        justify-content: space-between;
        justify-items: flex-start;
    }

    *, :after, :before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html,body{
        height: 100%;

        ul{
            padding: 0;
            list-style: none;
        }
    }

    #app {
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        min-height: 100%;
        height: 100vh;
        background-color: #f7f8fa !important;
    }
</style>
